<template>
    <div>
        <div class="info_body" v-if="ischick&&fromList.length>0">
            <div v-for="(itmes,index) in fromList" :key="index">
            <div class="listItmTop" v-if="index"></div>
                <div class="listItm">
                    <div class="listFlex main" style="padding-left: 22upx;">
                        <div class="listLeft36">{{itmes.name}}</div>
                        <div class="listRight"></div>
                    </div>
                </div>
                <div v-for="(itme,inde) in itmes.children" :key="inde">
                    <div v-if="itme.fieldType==3">
                        <div class="listItm">
                            <div class="listFlex main">
                                <div class="listLeft" :style="itme.name.length>6?'width:65%':''">
                                    <span class="mustCheck__content" v-if="itme.required==1">*</span>
                                    {{itme.name}}{{itme.valueUnit||''}}
                                </div>
                                <div class="listRight" :style="itme.name.length>6?'width:35%':''">
                                    <span class="listCheckT">
                                        <radio-group @change="bindDateChange($event,itme)">
                                            <span
                                                class="listradio"
                                                v-for="(itm,ind) in itme.valueList"
                                                :key="ind"
                                            >
                                                <radio
                                                    class="pink"
                                                    :value="ind"
                                                    :disabled="disabled"
                                                    :checked="from[itme.fieldName]==ind"
                                                    color="#F75193"
                                                >{{itm}}</radio>
                                            </span>
                                        </radio-group>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="list_tr" v-if="itme.children.length>0&&from[itme.fieldName]==1">
                            <div v-for="(itm,ind) in itme.children" :key="ind">
                                <div class="listItm" v-if="itm.fieldType==3">
                                    <div class="listFlex main">
                                        <div class="listLeft" :style="itm.name.length>6?'width:65%':''">
                                            <span class="mustCheck__content" v-if="itm.required==1">*</span>
                                            {{itm.name}}{{itm.valueUnit||''}}
                                        </div>
                                        <div class="listRight" :style="itm.name.length>6?'width:35%':''">
                                            <span class="listCheckT">
                                                <radio-group @change="bindDateChange($event,itm)">
                                                    <span
                                                        class="listradio"
                                                        v-for="(it,ins) in itm.valueList"
                                                        :key="ins"
                                                    >
                                                        <radio
                                                            class="pink"
                                                            :value="ins"
                                                            :disabled="disabled"
                                                            :checked="from[itm.fieldName]==ind"
                                                            color="#F75193"
                                                        >{{it}}</radio>
                                                    </span>
                                                </radio-group>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="listItm" v-if="itm.fieldType==4">
                                    <div class="listFlex main">
                                        <div
                                            class="listLeft"
                                            :style="itm.name.length>6?'width:65%':''"
                                        >
                                            <span
                                                class="mustCheck__content"
                                                v-if="itm.required==1"
                                            >*</span>
                                            {{itm.name}}{{itm.valueUnit||''}}
                                        </div>
                                        <div
                                            class="listRight"
                                            :style="itm.name.length>6?'width:35%':''"
                                        >
                                            <span class="listCheckT"></span>
                                        </div>
                                    </div>
                                    <div class="main">
                                        <!-- <checkbox-group @change="checkboxGroup($event,itm)">
                                            <span
                                                class="heckbox_s"
                                                v-for="(ite, index) in itm.valueList"
                                                :key="index"
                                            >
                                                <label>
                                                    <checkbox
                                                        class="pink"
                                                        :disabled="disabled"
                                                        :value="ite"
                                                        color="#F75193"
                                                    >{{ite}}</checkbox>
                                                </label>
                                            </span>
                                        </checkbox-group>-->
                                        <weixincheckbox
                                            @checkboxGroup="checkboxGroup"
                                            :disabled="disabled"
                                            :key="ind"
                                            :from="from"
                                            :itmeList="itm"
                                        />
                                    </div>
                                </div>
                                <div class="listItm" v-if="itm.fieldType==5">
                                    <div class="listFlex main">
                                        <div
                                            class="listLeft"
                                            :style="itm.name.length>6?'width:65%':''"
                                        >
                                            <span
                                                class="mustCheck__content"
                                                v-if="itm.required==1"
                                            >*</span>
                                            {{itm.name}}{{itm.valueUnit||''}}
                                        </div>
                                        <div
                                            class="listRight"
                                            :style="itm.name.length>6?'width:35%':''"
                                        >
                                            <span class="listCheckT">
                                                <input
                                                    type="text"
                                                    :disabled="disabled"
                                                    placeholder-style="color: #999;"
                                                    class="inputStyle"
                                                    placeholder="请填写"
                                                    v-model="from[itm.fieldName]"
                                                    @blur="inputT(itm)"
                                                />
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="itm.fieldType==6">
                                    <picker
                                        :disabled="disabled"
                                        class="listItm"
                                        mode="date"
                                        :end="endTime"
                                        @change="DateChange($event,itm)"
                                    >
                                        <div class="listFlex main">
                                            <div
                                                class="listLeft"
                                                :style="itm.name.length>6?'width:65%':''"
                                            >
                                                <span
                                                    class="mustCheck__content"
                                                    v-if="itm.required==1"
                                                >*</span>
                                                {{itm.name}}{{itm.valueUnit||''}}
                                            </div>

                                            <div class="listRight">
                                                <span
                                                    class="listCheckT"
                                                >{{ from[itm.fieldName]||"请选择" }}</span>
                                                <span class="weui-cell__ft_in-access"></span>
                                            </div>
                                        </div>
                                    </picker>
                                </div>
                                <div v-if="itm.fieldType==8">
                                    <picker
                                        class="listItm"
                                        :disabled="disabled"
                                        @change="edulevelChange($event,itm)"
                                        :value="from[itm.fieldName]"
                                        :range="itm.valueList"
                                    >
                                        <div class="listFlex main">
                                            <div
                                                class="listLeft"
                                                :style="itm.name.length>6?'width:65%':''"
                                            >
                                                <span
                                                    class="mustCheck__content"
                                                    v-if="itm.required==1"
                                                >*</span>
                                                {{itm.name}}{{itm.valueUnit||''}}
                                            </div>
                                            <div
                                                class="listRight"
                                                :style="itm.name.length>6?'width:35%':''"
                                            >
                                                <span
                                                    class="listCheckT"
                                                >{{ from[itm.fieldName]||"请选择" }}</span>
                                                <span class="weui-cell__ft_in-access"></span>
                                            </div>
                                        </div>
                                    </picker>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="listItm" v-if="itme.fieldType==4">
                        <div class="listFlex main">
                            <div class="listLeft" :style="itme.name.length>6?'width:65%':''">
                                <span class="mustCheck__content" v-if="itme.required==1">*</span>
                                {{itme.name}}{{itme.valueUnit||''}}
                            </div>
                            <div class="listRight" :style="itme.name.length>6?'width:35%':''">
                                <span class="listCheckT"></span>
                            </div>
                        </div>
                        <div class="main">
                            <!-- <checkbox-group @change="checkboxGroup($event,itme)">
                                <span
                                    v-for="(ite, ina) in itme.valueList"
                                    class="heckbox_s"
                                    :key="ina"
                                >
                                    <label>
                                        <checkbox class="pink" :value="ite" color="#F75193">{{ite}}</checkbox>
                                    </label>
                                </span>
                            </checkbox-group>-->
                            <weixincheckbox
                                @checkboxGroup="checkboxGroup"
                                :key="inde"
                                :disabled="disabled"
                                :from="from"
                                :itmeList="itme"
                            />
                        </div>
                    </div>
                    <div class="listItm" v-if="itme.fieldType==5">
                        <div class="listFlex main">
                            <div class="listLeft" :style="itme.name.length>6?'width:65%':''">
                                <span class="mustCheck__content" v-if="itme.required==1">*</span>
                                {{itme.name}}{{itme.valueUnit||''}}
                            </div>
                            <div class="listRight" :style="itme.name.length>6?'width:35%':''">
                                <span class="listCheckT">
                                    <input
                                        type="text"
                                        :disabled="disabled"
                                        placeholder-style="color: #999;"
                                        class="inputStyle"
                                        placeholder="请填写"
                                        v-model="from[itme.fieldName] "
                                        @blur="inputT(itme)"
                                    />
                                </span>
                            </div>
                        </div>
                    </div>
                    <div v-if="itme.fieldType==6">
                        <picker
                            :disabled="disabled"
                            class="listItm"
                            mode="date"
                            :end="endTime"
                            @change="bindDateChange($event,itme)"
                        >
                            <div class="listFlex main">
                                <div class="listLeft" :style="itme.name.length>6?'width:65%':''">
                                    <span class="mustCheck__content" v-if="itme.required==1">*</span>
                                    {{itme.name}}{{itme.valueUnit||''}}
                                </div>

                                <div class="listRight" :style="itme.name.length>6?'width:35%':''">
                                    <span class="listCheckT">{{ from[itme.fieldName]||"请选择" }}</span>
                                    <span class="weui-cell__ft_in-access"></span>
                                </div>
                            </div>
                        </picker>
                    </div>
                    <div v-if="itme.fieldType==7">
                        <div class="listItm">
                            <div class="listFlex main">
                                <div class="listLeft" :style="itme.name.length>6?'width:65%':''">
                                    <span class="mustCheck__content" v-if="itme.required==1">*</span>
                                    {{itme.name}}{{itme.valueUnit||''}}
                                </div>
                                <div class="listRight" :style="itme.name.length>6?'width:35%':''"></div>
                            </div>
                        </div>
                        <div class="list_tr">
                            <div v-for="(itm,ind) in itme.children" :key="ind">
                                <div class="listItm" v-if="itm.fieldType==4">
                                    <div class="listFlex main">
                                        <div
                                            class="listLeft"
                                            :style="itm.name.length>6?'width:65%':''"
                                        >
                                            <span
                                                class="mustCheck__content"
                                                v-if="itm.required==1"
                                            >*</span>
                                            {{itm.name}}{{itm.valueUnit||''}}
                                        </div>
                                        <div
                                            class="listRight"
                                            :style="itm.name.length>6?'width:35%':''"
                                        >
                                            <span class="listCheckT"></span>
                                        </div>
                                    </div>
                                    <div class="main">
                                        <!-- <checkbox-group @change="checkboxGroup($event,itm)">
                                            <span
                                                class="heckbox_s"
                                                v-for="(ite, index) in itm.valueList"
                                                :key="index"
                                            >
                                                <label>
                                                    <checkbox
                                                        class="pink"
                                                        :disabled="disabled"
                                                        :value="ite"
                                                        color="#F75193"
                                                    >{{ite}}</checkbox>
                                                </label>
                                            </span>
                                        </checkbox-group>-->
                                        <weixincheckbox
                                            @checkboxGroup="checkboxGroup"
                                            :disabled="disabled"
                                            :key="ind"
                                            :from="from"
                                            :itmeList="itm"
                                        />
                                    </div>
                                </div>
                                <div class="listItm" v-if="itm.fieldType==5">
                                    <div class="listFlex main">
                                        <div
                                            class="listLeft"
                                            :style="itm.name.length>6?'width:65%':''"
                                        >
                                            <span
                                                class="mustCheck__content"
                                                v-if="itm.required==1"
                                            >*</span>
                                            {{itm.name}}{{itm.valueUnit||''}}
                                        </div>
                                        <div
                                            class="listRight"
                                            :style="itm.name.length>6?'width:35%':''"
                                        >
                                            <span class="listCheckT">
                                                <input
                                                    type="text"
                                                    :disabled="disabled"
                                                    placeholder-style="color: #999;"
                                                    class="inputStyle"
                                                    placeholder="请填写"
                                                    v-model="from[itm.fieldName]"
                                                    @blur="inputT(itm)"
                                                />
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="itm.fieldType==6">
                                    <picker
                                        :disabled="disabled"
                                        class="listItm"
                                        mode="date"
                                        :end="endTime"
                                        @change="DateChange($event,itm)"
                                    >
                                        <div class="listFlex main">
                                            <div
                                                class="listLeft"
                                                :style="itm.name.length>6?'width:65%':''"
                                            >
                                                <span
                                                    class="mustCheck__content"
                                                    v-if="itm.required==1"
                                                >*</span>
                                                {{itm.name}}{{itm.valueUnit||''}}
                                            </div>

                                            <div class="listRight">
                                                <span
                                                    class="listCheckT"
                                                >{{ from[itm.fieldName]||"请选择" }}</span>
                                                <span class="weui-cell__ft_in-access"></span>
                                            </div>
                                        </div>
                                    </picker>
                                </div>
                                <div v-if="itm.fieldType==8">
                                    <picker
                                        class="listItm"
                                        :disabled="disabled"
                                        @change="edulevelChange($event,itm)"
                                        :value="from[itm.fieldName]"
                                        :range="itm.valueList"
                                    >
                                        <div class="listFlex main">
                                            <div
                                                class="listLeft"
                                                :style="itm.name.length>6?'width:65%':''"
                                            >
                                                <span
                                                    class="mustCheck__content"
                                                    v-if="itm.required==1"
                                                >*</span>
                                                {{itm.name}}{{itm.valueUnit||''}}
                                            </div>
                                            <div
                                                class="listRight"
                                                :style="itm.name.length>6?'width:35%':''"
                                            >
                                                <span
                                                    class="listCheckT"
                                                >{{ from[itm.fieldName]||"请选择" }}</span>
                                                <span class="weui-cell__ft_in-access"></span>
                                            </div>
                                        </div>
                                    </picker>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="itme.fieldType==8">
                        <picker
                            class="listItm"
                            :disabled="disabled"
                            @change="edulevelChange($event,itme)"
                            :value="from[itme.fieldName]"
                            :range="itme.valueList"
                        >
                            <div class="listFlex main">
                                <div class="listLeft" :style="itme.name.length>6?'width:65%':''">
                                    <span class="mustCheck__content" v-if="itme.required==1">*</span>
                                    {{itme.name}}{{itme.valueUnit||''}}
                                </div>
                                <div class="listRight" :style="itme.name.length>6?'width:35%':''">
                                    <span class="listCheckT">{{ from[itme.fieldName]||"请选择" }}</span>
                                    <span class="weui-cell__ft_in-access"></span>
                                </div>
                            </div>
                        </picker>
                    </div>
                </div>
            </div>
        </div>
        <div class="btmItm">温馨提示：该数据将用于产检建册，严格保密。</div>
        <div class="btn">
            <div class="saveBtn" @click="previous">
                <span>上一步</span>
            </div>
            <div class="saveBtn" @click="handleClick">
                <span>下一步</span>
            </div>
        </div>
    </div>
</template>
<script>
import weixincheckbox from "pages/components/weixincheckbox.vue";
export default {
    data() {
        return {
            endTime: "",
            from: {},
            ischick: false
        };
    },
    components: {
        weixincheckbox
    },
    props: {
        
        disabled: {
            type: Boolean
        },
        fromList: {
            type: Array,
            required: true
        },
        newlybuild: {
            type: String
        }
    },
    mounted() {
       var _this = this;
        this.getMedicalHistoryMiniApp();
        _this.endTime = _this.gettimes();
    },
    methods: {
        gettimes() {
            var dd = new Date();
            dd.setDate(dd.getDate()); //获取AddDayCount天后的日期
            var y = dd.getFullYear();
            var m =
                dd.getMonth() + 1 < 10
                    ? "0" + (dd.getMonth() + 1)
                    : dd.getMonth() + 1; //获取当前月份的日期，不足10补0
            var d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate(); //获取当前几号，不足10补0
            return y + "-" + m + "-" + d;
        },
        getMedicalHistoryMiniApp() {
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/pregnant/getMedicalHistoryMiniApp", {
                    pregnantId: uni.getStorageSync("pregnantId")
                })
                .then(res => {
                    if (res.status == 200) {
                        var from = res.content;
                        if(from){
                            _this.from = JSON.parse(from);
                        }
                        setTimeout(() => {
                            this.ischick = true;
                        }, 0);
                        
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none"
                        });
                    }
                })
                .catch(err => reject(err));
        },
        previous() {
            var _this = this;
            _this.$emit("previous", 2);
        },
         verification() {
            var _this = this;
            var array = _this.fromList;
            for (var i = 0; i < array.length; i++) {
                for (var j = 0; j < array[i].children.length; j++) {
                    var script = array[i].children[j];
                    if (!_this.from[script.fieldName]&&script.required == 1) {
                         
                        return uni.showToast({
                            title: "请填写" + script.name,
                            icon: "none"
                        });
                    }
                   if(_this.from[script.fieldName]&&script.expression){
                        const reg = new RegExp(script.expression);
                        if (!reg.test(_this.from[script.fieldName])) {
                            return uni.showToast({
                                title: script.name+"格式错误！请输入"+script.hospitalDescription,
                                icon: "none"
                            });
                        }
                    }
                    if(script.children){
                       for (var s = 0; s < script.children.length; s++) {
                            if (!_this.from[script.children[s].fieldName]&&script.children[s].required == 1) {
                                return uni.showToast({
                                    title: "请填写" + script.children[s].name,
                                    icon: "none"
                                });
                            }
                            if(_this.from[script.children[s].fieldName]&&script.children[s].expression){
                                const reg = new RegExp(script.children[s].expression);
                                if (!reg.test(_this.from[script.children[s].fieldName])) {
                                    return uni.showToast({
                                        title: script.children[s].name+"格式错误！请输入"+script.children[s].hospitalDescription,
                                        icon: "none"
                                    });
                                }
                            }
                       }
                    }
                }
            }
            _this.saveMedicalHistoryMiniApp(_this.from);
        },
        handleClick() {
            var _this = this;
            if(_this.disabled){
                 return _this.$emit("previous", 4);
            }
            _this.verification()
        },
        saveMedicalHistoryMiniApp(from) {
            var _this = this;
            _this.$ajaxs
                .post("/mobile/v1/pregnant/saveMedicalHistoryMiniApp", {
                    pregnantId: uni.getStorageSync("pregnantId"),
                    customFieldJson: JSON.stringify(from)
                })
                .then(res => {
                    if (res.status == 200) {
                        if (res.content) {
                            _this.$emit("previous", 4);
                        } else {
                            uni.showToast({
                                title: res.message,
                                icon: "none"
                            });
                        }
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none"
                        });
                    }
                })
                .catch(err => reject(err));
        },
        edulevelChange(e, itm) {
            // console.log(e, "下拉");
           for(var i=0;i<itm.valueList.length;i++){
                if(i==e.detail.value){
                    this.$set(this.from, itm.fieldName, itm.valueList[i]+'');
                }
            }
        },
        bindDateChange(e, itm) {
            // console.log(e);
            this.$set(this.from, itm.fieldName, e.detail.value);
        },
        DateChange(e, itm) {
            // console.log(e);
            this.$set(this.from, itm.fieldName, e.detail.value);
        },
        checkboxGroup(e, itm) {
            this.$set(this.from, itm.fieldName, e.detail.value);
        },
        inputT(script){
            var _this = this;
            if(_this.from[script.fieldName]&&script.expression){
                const reg = new RegExp(script.expression);
                if (!reg.test(_this.from[script.fieldName])) {
                    return uni.showToast({
                        title: "请输入"+script.hospitalDescription,
                        icon: "none"
                    });
                }
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.btn {
    width: 100%;
    height: 64px;
    padding: 0 70upx;
    display: flex;
    justify-content: space-between;
}

.saveBtn {
    height: 80upx;
    width: 240upx;
    text-align: center;
    line-height: 80upx;
    border: 1px solid #fa4d93;
    border-radius: 40upx;
    color: #fa4d93;
    font-size: 32upx;
    background: #fff;
    margin: 0 40upx;
}
</style>